<template>
  <div>
    <el-card>
      <div slot="header"
           class="clearfix">
        <span>订单评价详情</span>
      </div>
      <el-form ref="orderForm"
               :model="orderForm"
               :rules="formRule"
               label-position="right"
               label-width="120px"
               style="width:100%;flex-wrap:wrap"
               class="flex">
        <el-form-item label="订单号"
                      prop="order_id"
                      style="width:30%">
          <el-input v-model="orderForm.orderNum"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="订单时间"
                      prop="add_time"
                      style="width:30%">
          <el-input v-model="orderForm.addTime"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="订单状态"
                      prop="status"
                      style="width:30%;">
          <el-input v-model="orderForm.status"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

       <el-form-item label="付款方式"
                      prop="payType"
                      style="width:30%;">
          <el-input v-model="orderForm.payType"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        
       <el-form-item label="订单金额"
                      prop="totalPrice"
                      style="width:30%;">
          <el-input v-model="orderForm.totalPrice"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

         <el-form-item label="购买账号"
                      prop="realName"
                      style="width:30%;">
          <el-input v-model="orderForm.realName"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="购买用户手机号"
                      prop="userPhone"
                      style="width:30%;">
          <el-input v-model="orderForm.userPhone"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>

        <el-form-item label="收货人姓名"
                      prop="realName"
                      style="width:30%;">
          <el-input v-model="orderForm.realName"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
        <el-form-item label="收货人电话"
                      prop="userPhone"
                      style="width:30%;">
          <el-input v-model="orderForm.userPhone"
                    placeholder=""
                    :disabled="isDisabled"></el-input>
        </el-form-item>
       
        <el-form-item label="收货地址"
                      prop="userAddress"
                      style="width:30%;">
          <el-input v-model="orderForm.userAddress"
                    :disabled="isDisabled"></el-input>
        </el-form-item>
      </el-form>
      <el-table :data="productListData"
                style="width: 100%"
                height="400"
                stripe>
        <el-table-column prop="productCode"
                         label="制造商料号"
                         align="center"></el-table-column>
        <el-table-column prop="aksCode"
                         label="AKS料号"
                         align="center"></el-table-column>
 
        <el-table-column prop="menuName"
                         label="供应商"
                         align="center"></el-table-column>
        <el-table-column prop="sonStatus"
                         label="商品状态"
                         align="center"></el-table-column>
        <el-table-column prop="buyNum"
                         label="购买数量"
                         align="center"></el-table-column>
                                          
        <el-table-column prop="price"
                         label="单价"
                         align="center"></el-table-column>
        <el-table-column prop="totalMoney"
                         label="总金额"
                         align="center"></el-table-column>
        <el-table-column label="操作"
                         align="center"
                         fixed="right"
                         width="250">
          <template slot-scope="scope">
            <el-button type="primary"
                       size="mini"
                       :disabled="scope.row|statusFilter"
                       @click="sureOrder(scope.row,scope.$index);dialogVisible = true;">查看评价</el-button>

          </template>
        </el-table-column>
      </el-table>
      <el-pagination style="text-align:center;margin-top:20px"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
      <!--<div class="flex" style="justify-content:center;margin:15px 0" v-show="orderForm.paid==0" >
        <el-button type="primary" size="medium" v-if="isDisabled"  @click="dialogVisible = true">确认订单</el-button>
        <el-button type="danger" size="medium" style="margin-left:50px"  @click="redialogVisible = true" v-if="isDisabled">打回订单</el-button>
      </div>-->
    </el-card>


           <el-dialog title="提示"
                       :visible.sync="dialogVisible"
                       width="40%"
                       center
                       top="10%"
                       :modal-append-to-body='false'>
               <el-form 
                label-position="left"
                label-width="250px">
               <el-form-item label="您对此次样品购买服务是否满意"
                      prop="satisfied">
                  <el-input v-model="satisfied"
                             disabled
                            auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="您购买的样品是否已被承认到贵公司的案子中"
                              prop="recognize">
                  <el-input v-model="recognize"
                             disabled
                            auto-c
                            omplete="off"></el-input>
                </el-form-item>    
                <el-form-item label="贵司的案子什么时候开始量产"
                              prop="isuse">
                  <el-input v-model="isuse"
                             disabled
                            auto-c
                            omplete="off"></el-input>
                </el-form-item>  
                <el-form-item label="贵司的案子量产数量大概是多少"
                              prop="much">
                  <el-input v-model="much"
                             disabled
                            auto-c
                            omplete="off"></el-input>
                </el-form-item>       
                 </el-form>
              
              <div slot="footer"
                  class="dialog-footer">
                <el-button @click="dialogVisible = false">确 定</el-button>
              </div>
            </el-dialog>

  </div>
</template>

<script>
import {
  ORDER_CART_LIST,ORDER_PRODUCT_LIST,
  ORDER_AGREE, ORDER_REFUSE
} from '@/utils/api';
import { formatDate } from '@/utils/validate.js';
import axios from 'axios'
export default {
  data () {
    return {
      mainId:null,
      dialogVisible: false,
      redialogVisible: false,
      orderForm: {},
      formRule: {},
      productListData:[],
      tableData: [],
      payOptions: [{value: "0",
          label: "未支付" }, {
          value: "1",
          label: "已支付" }, { value: "3", label: "线下处理" }
      ],
      payMethods: [
        { value: "0",
          label: "银行卡" },
        { value: "1",
          label: "线下支付" }
      ],
      orderOptions: [ { value: "0",
          label: "未打回" },
        { value: "1",
          label: "已打回" },
        { value: "2",
          label: "未确认" } ],
      isDisabled: false,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      replayList: [],
      disabled: true,
      satisfied: '',
      recognize: '',
      isuse: '',
      much: '',
    };
  },
  filters: {
    statusFilter (val) {
      console.log(val.sonStatus)
      return val.sonStatus=='已评价' ? false : true;
    }
  },
  mounted () {
     if (this.$route.query["data"]) {
      this.isDisabled = this.$route.query["handler"] == "check" ? true : false;
      this.orderForm = this.$route.query["data"];
      console.log('==>'+JSON.stringify(this.orderForm))
      this.mainId=this.orderForm.id
      

      //状态
      switch(this.orderForm.status){
        case 0:
          this.orderForm.status = "待付款"
          break
        case 1:
          this.orderForm.status = "待收货"
          break;
        case 2:
          this.orderForm.status = "待发货"
          break;
        case 3:
          this.orderForm.status = "待评价"
          break;
        case 6:
          this.orderForm.status = "已评价"
          break;
        case -1:
          this.orderForm.status = "退换货订单"
          break;
        case 4:
          this.orderForm.status = "已完成"
          break;
      }
      this.getOrderList()
    }
  },
  methods: {
    sureOrder (row, index) {
      console.log("查看评价",row)
      this.replayList[0] = row
      console.log(this.replayList[0].satisfied)
      this.satisfied = this.replayList[0].satisfied == 0 ? '满意' : this.replayList[0].satisfied == 1 ? '一般' : this.replayList[0].satisfied == 2 ? '不满意' : ''
      this.recognize = this.replayList[0].recognize == 0 ? '已承认' : this.replayList[0].recognize == 1 ? '未承认' : this.replayList[0].recognize == 2 ? '评估中' : ''
      this.isuse = this.replayList[0].isUse == 0 ? '已量产' : this.replayList[0].isUse == 1 ? '三个月内' : this.replayList[0].isUse == 2 ? '6个月内' : this.replayList[0].isUse == 3 ? '6个月后' : ''
      this.much = this.replayList[0].much == 0 ? '<500K sets/M' : this.replayList[0].much == 1 ? '500K-1000KK sets/M' : this.replayList[0].much == 2 ? '>1000KK sets/M' : ''
    },
    open () {

    },
    getOrderList() {
      console.log('===>'+this.mainId)
      ORDER_PRODUCT_LIST({ 
          mainId: this.mainId,
          pageNo:this.currentPage,
          pageSize:this.pageSize
      }).then(res => {
          this.productListData = res.data.dataList
          this.total = res.data.count
          for (let i in this.productListData) {
            this.productListData[i].addTime = this.formatSecond(this.productListData[i].addTime)
            //处理状态
            if(this.productListData[i].sonStatus==6){
                this.productListData[i].sonStatus = "已评价"
            }else{
                this.productListData[i].sonStatus = "待评价"
            }
          }
          console.log('==productListData=>'+this.productListData)
      })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getOrderList()
    },
    //时间格式化  
    formatSecond (second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    },
  }
};
</script>

<style lang="scss" scoped>
.fontz {
  font-size: 20px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
</style>